<template>
	<view class="wrap">
		<view class="one item" :class="level > 5 ? 'bg-blue' : ''"></view>
		<view class="two item" :class="level > 10 ? 'bg-blue' : ''"></view>
		<view class="three item" :class="level > 15 ? 'bg-blue' : ''"></view>
		<view class="four item" :class="level > 20 ? 'bg-blue' : ''"></view>
		<view class="five item" :class="level > 25 ? 'bg-blue' : ''"></view>
		<text class="cuIcon-close" v-if="level <= 5"></text>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		level: {
			type: Number,
			default: 0
		}
	}
};
</script>

<style lang="scss">
.wrap {
	display: flex;
	align-items: flex-end;
	position: relative;

	.cuIcon-close {
		position: absolute;
		top: -3rpx;
		left: 0;
		font-size: 20rpx;
	}
	
		
	
	.item {
		margin-left: 6rpx;
		width: 6rpx;
		background-color: #999;
	}

	.one {
		height: 10rpx;
	}

	.two {
		height: 16rpx;
	}

	.three {
		height: 22rpx;
	}

	.four {
		height: 28rpx;
	}

	.five {
		height: 34rpx;
	}

	.bg-blue {
		background-color: rgb(7, 213, 176);
	}
}
</style>
